<!--
1.什么是HTML
HTML = Hyper Text Markup Language
超文本标记语言

标记是用来告诉 浏览器（Browser）标记的内容是什么类型
这种标记形式 是通过  < 标记语言 > 的形式

标记语言又称之为 标签 tag/ Element
比如 一段段落

<p>这是一段标记为 段落的标签</p>

-->
<!--文档声明部分 
DOCTYPE = document type 文档类型
<!DOCTYPE html> 如果文档类型不是HTML 就不予解析
-->
<!DOCTYPE html>
<!--html标记 所标记的内容都是 html的内容
lang 属性 是用来设置当前页面的内容
当加载页面的时候 浏览器会自动配置语言，
如果和当前属地不符合的会提示翻译
en 表示英语   zh-cn 表示中文简体
-->
<html lang="zh-cn">
<!--页面的相关信息-->
<head>
    <!--页面的编码的设置 -->
    <meta charset="UTF-8">
    <!--页面的标题内容-->
    <title>我的第一个页面</title>
</head>
<!--页面内容-->
<body>
    Hello Python
    <!--学习 HTML中常用的 标记语言-->
    <b>这是文字加粗</b>
    <!--超链接标签
        href = 链接的地址 可以是本地html 也可以外部链接
        href 属性必填
        如果不想跳转 使用 href = '#'
    -->
    <a href="http://www.baidu.com">百度一下，就知道</a>
    <i>这是一个斜体标签</i>
    <!--
    标签分为 单标签和双标签 H5中单标签不多，大部分都是双标签
    -->
    <br />
    <mark>这是显示的标记</mark>
    <hr />
    <span>普通文字标签</span>
    <!--a^2 + b^2 = c^2-->
    <!--sup 表示上标-->
    a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
    <!--今天的天气 26o-->

    <!--sub表示下标-->
    O<sub>2</sub>
    <big>这是大号么？</big>
    <!--以上都是 HTML中的文字标签 修饰文字样式-->

    <!--文本结构标签-->
    <h1>这是最大号的标题</h1>
    <h2>这是2号标题</h2>
    <h3>这是3号标题</h3>
    <h4>这是4号标题</h4>
    <h5>这是5号标题</h5>
    <h6>这是6号标题</h6>

    <!--p 段落标签-->
    <p>这是一段段落1</p>
    <p>这是一段段落2</p>
    <p>这是一段段落3</p>

    <!--div 超级容器-->
    <div style="background-color:red;color:white;text-align:center;height:100px;line-height:100px;font-size:50px;">这是一个容器标签</div>

    <hr />
    <!--嵌入标签-->
    <img src="./h5elm.png" alt="示例图" width="300">
    <!--<img src="https://www.baidu.com/img/bd_logo12.png?where=super" alt="这是logo" title="这是标题">-->

    <hr />
    <!--表单标签-->
    <!--文本输入框 用来输入数据
    type 表示当前input 的类型
    text 是文本类型-->
    <input type="text" placeholder="输入手机号">

    <!--展示一个表格-->
    <!--table 标签是表格标签
    border 设置边框
    -->
    <table border="1" style="color:red;">
        <tr>
            <td style="background-color:yellow;width:100px;">姓名</td>
            <td style="height:100px;">手机号</td>
            <td style="text-align:center;width:100px;">年龄</td>
        </tr>
        <tr>
            <td>IG.wxz</td>
            <td>12345678901</td>
            <td>30</td>
        </tr>
    </table>

    <hr />
    <table border="2" cellpadding="10" cellspacing="0" width="600" bordercolor="green">
        <!--表头-->
        <thead>
            <tr>
                <th colspan="6" bgcolor="red">课程表</th>
            </tr>
            <tr>
                <th width="200">时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <!--表数据-->
        <tbody>
            <tr>
                <td rowspan="2">内容</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
            </tr>
        </tbody>
        <!--页脚-->
        <tfoot align="center">
            <tr>
                <td>合计</td>
                <td colspan="5">100000</td>
            </tr>
        </tfoot>
    </table>

    <hr />
    <!--列表标签-->
    <!--ul>li{第$名}*4-->
    <ul>
        <li>第1名
            <ul>
                <li>张三
                    <ul>
                        <li>a1
                            <ul>
                                <li>b1</li>
                                <li>b2</li>
                                <li>b3</li>
                            </ul>
                        </li>
                        <li>a2</li>
                        <li>a3</li>
                    </ul>
                </li>
                <li>李四</li>
            </ul>
        </li>
        <li>第2名</li>
        <li>第3名</li>
        <li>第4名</li>
    </ul>

    <!--ol 表示有序列表
    type 表示有序列表 是以什么方式进行列显示 又 1，A ，a ，I ，i
    默认 数字排序  I 表示是罗马数字
    start 表示 排序的起始位置
    reversed 表示倒序排列
    -->
    <ol start="10">
        <li>红色</li>
        <li>黄色</li>
        <li>绿色</li>
        <li>蓝色</li>
    </ol>

    <ol type="I">
        <li>第1名</li>
        <li>第2名</li>
        <li>第3名</li>
        <li>第4名</li>
    </ol>

    <dl>
        <dt>这是说明标题1</dt>
        <dd>这是文件内容</dd>
        <dd>这是文件内容</dd>
        <dt>这是说明标题2</dt>
        <dd>这是文件内容</dd>
        <dd>这是文件内容</dd>
    </dl>

</body>
</html>